<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 表格整体样式 */
        table {
            width: 50%; /* 设置表格宽度 */
/*            margin: 20px auto; *//* 设置外边距，让表格居中 */
            border-collapse: collapse; /* 合并边框 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            font-family: Arial, sans-serif; /* 设置字体 */
            font-size: 16px; /* 设置字体大小 */
        }

        /* 表头样式 */
        th {
            background-color: #4CAF50; /* 设置表头背景颜色 */
            color: white; /* 设置表头文字颜色 */
            text-align: center; /* 设置表头文字居中 */
            padding: 10px; /* 设置表头内边距 */
        }

        /* 表格单元格样式 */
        td {
            border: 1px solid #ddd; /* 设置单元格边框颜色 */
            text-align: center; /* 设置单元格文字居中 */
            padding: 10px; /* 设置单元格内边距 */
        }

        /* 奇数行背景颜色 */
        tr:nth-child(odd) {
            background-color: #f2f2f2; /* 设置奇数行背景颜色 */
        }

        /* 鼠标悬停行样式 */
        tr:hover {
            background-color: #ddd; /* 设置鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>
    <h1>模板标签</h1>

    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        {% for item in students %}
        <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
            <td>{{ item.score }}</td>
        </tr>
        {% endfor %}
    </table>

    <ul>
        {% for item in city %}
            {% if forloop.first %}
            <li style="color: red;">{{forloop.counter}} {{ item }}</li>
            {% elif forloop.last %}
            <li style="color: blue;">{{forloop.counter}} {{ item }}</li>
            {% else %}
            <li>{{forloop.counter}} {{ item }}</li>
            {% endif %}
        {% endfor %}
    </ul>

    <p>
        温度：{{ wendu }}
        {% if wendu > 25 %}
        天气比较热
        {% elif wendu > 15 %}
        天气正好
        {% elif wendu > 0 %}
        天气有点冷
        {% else %}
        天气比较冷
        {% endif %}
    </p>
    <p>日期：{{ date }}</p>
</body>
</html>